<template>
  <div class="page-wrapper page-wrapper-needheader is-pc">
    <div class="mod-center-page">
      <div class="ps main-left page-item center-left-class" style="height: 848px;width: 10%;">
        <div class="menu">
          <div class="mod-top-list">
            <ul class="mod-center-ul mod-center-ul-data border-lighter">
              <li :class="['pc-menu','ucenter',li_checked==1?'checked':'']" @click="click_li(1)">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">
                    我的帐号
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <!-- <li :class="['pc-menu',li_checked==2?'checked':'']" @click="click_li(2)" v-if="($store?.state?.user?$store?.state?.user?.type:-1)<=1">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">
                    我的解译
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <li :class="['pc-menu',li_checked==3?'checked':'']" @click="click_li(3)"  v-if="($store?.state?.user?$store?.state?.user?.type:-1)>=1">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">
                    解译进度
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <li :class="['pc-menu',li_checked==4?'checked':'']" @click="click_li(4)">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">
                    登录密码
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li> -->
              <!-- <li :class="['pc-menu',li_checked==5?'checked':'']" @click="click_li(5)">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">
                    我的云盘
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li> -->
            </ul>
          </div>
          <div class="mod-center-list">
            <ul class="mod-center-ul mod-center-ul-data border-lighter">
              <!-- v-show="GetUserRole('2c938082838dcd02018634ce7891765a') ||GetUserRole('2c938082838dcd02018634cedc02765e')" -->
              <li  
              :class="['pc-menu',li_checked==9?'checked':'']" @click="click_li(9)"  
              >
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">项目文件管理</div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <li :class="['pc-menu',li_checked==8?'checked':'']" @click="click_li(10)"  v-if="li_items.type_10_qx">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">机房设备管理</div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <!-- <li  
              :class="['pc-menu',li_checked==8?'checked':'']" @click="click_li(8)"  
              >
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">专家管理</div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <li :class="['pc-menu',li_checked==6?'checked':'']" @click="click_li(6)"  v-if=" ($store.state.user.user?$store.state.user.user.username:'')=='13674833694' ||($store.state.user.user?$store.state.user.user.username:'')=='13644710263'">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">
                    资产管理
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <li :class="['pc-menu',li_checked==7?'checked':'']" @click="click_li(7)" v-if=" ($store.state.user.user?$store.state.user.user.username:'')=='13644710263'">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left"> 
                    报销管理
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <li class="pc-menu">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">
                    登录设备
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li>
              <li class="pc-menu" style="">
                <div class="li-line border-lighter clearfix">
                  <div class="mod-li-div pb16 left">
                    授权管理
                  </div>
                  <div class="blueicon"></div>
                </div>
              </li> -->
            </ul>
          </div>
          <!-- <div  class="mod-center2-list">
            <ul  class="mod-center-ul mod-center-ul-data border-lighter">
              <li  class="pc-menu">
                <div  class="li-line border-lighter clearfix">
                  <div  class="mod-li-div left">
                    登录记录
                  </div>
                  <div  class="blueicon"></div>
                </div>
              </li>
              <li  class="pc-menu">
                <div  class="li-line border-lighter clearfix">
                  <div  class="mod-li-div left">
                    敏感记录
                  </div>
                  <div  class="blueicon"></div>
                </div>
              </li>
              <li  class="pc-menu">
                <div  class="li-line border-lighter clearfix">
                  <div  class="mod-li-div left">
                    关联帐号
                  </div>
                  <div  class="blueicon"></div>
                </div>
              </li>
            </ul>
          </div>
          <div  class="mod-bottom-list">
            <ul  class="mod-center-ul border-lighter">
              <li  class="pc-menu">
                <div  class="li-line account-safecenter border-lighter clearfix">
                  <div  class="mod-li-div left">帐号申诉</div>
                  <div  class="blueicon"></div>
                </div>
              </li>
              <li  class="pc-menu">
                <div  class="li-line account-safecenter border-lighter clearfix">
                  <div  class="mod-li-div left">帐号注销</div>
                  <div  class="blueicon"></div>
                </div>
              </li>
            </ul>
          </div>-->
        </div> 
      </div>
      <div class="main-center page-item center-center-class" style="width: 90%;">
        <div class="main-center-content " style="min-height: 848px;">
          <interpret v-if="li_checked==2"></interpret>
          <upload v-if="li_checked==5"></upload>
          <expert v-if="li_checked==8"></expert>
          <fixed_assets v-if="li_checked==6"></fixed_assets>
          <cost v-if="li_checked==7"></cost>
          <project_files v-if="li_checked==9"></project_files>
          <machine v-if="li_checked==10"></machine>
          
        </div>
      </div>
      <div class="main-right page-item center-right-class" v-if="li_checked==1">
        <div class="main-right-content" style="height: 848px;">
          <div  class="manage-main-right">
            <div  class="right-photo">
              <img :src="$store.state.userpic?$store.state.userpic:'https://himg.bdimg.com/sys/portrait/item/pp.1.c88a6253.zpZZWS90qpq9FhBZQNEE4Q.jpg?tt=1621606840600'">
              <div  class="hover-photo">
                <!-- https://passport.baidu.com/v3/ucenter/accountportrait -->
                <a  target="_blank" title="去设置头像" href="">
                  修&nbsp;改头&nbsp;像
                </a></div>
            </div>
            <h2  class="right-name">Hi,{{$store.state.user?$store.state.user.fullname:''}}</h2>
            <h3  class="right-info"><span >tel:</span> 
              <span>{{$store.state.user.user?$store.state.user.user.tellphone:''}}</span>
            </h3>
            <hr  class="right-line">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
  export default {
    data() {
      return {
        li_checked:1,

        li_items:{
          type_10_id:"2c93808288fb4c08018c2435be514325",
          type_10_qx:true,
        },



      }
    },
    components: {
      upload: defineAsyncComponent(() => import("./uploads/upload_main.vue")),
      fixed_assets: defineAsyncComponent(() => import("./fixed_assets.vue")),
      cost: defineAsyncComponent(() => import("./cost.vue")),
      interpret: defineAsyncComponent(() => import("./Interpret.vue")),
      expert: defineAsyncComponent(() => import("./expert.vue")),
      project_files: defineAsyncComponent(() => import("./uploads/project_files.vue")),
      machine: defineAsyncComponent(() => import("./machine.vue")),
      
      
    },
    mounted() {
      //



      //
      this.init_li();
    },
    created() {

    },
    computed: {

    },
    methods: {
      init_li(){
        let type_10_id=this.li_items.type_10_id
        let find_index=this.$store.state.user_roles.findIndex((val)=>{
          return val.id==type_10_id
        })
        if(find_index>=0){
          this.li_items.type_10_qx=true
        }
      },
      click_li(value){
        this.li_checked=value
      }
    }
     
  }
</script>
<style>
.page-wrapper-needheader {
  /* padding-top: 60px; */
  box-sizing: border-box;
}
.mod-center-page {
  width: 100%;
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -moz-box-pack: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  vertical-align: top;
  background: #F3F5FB;
  justify-content: center;
  display: table;
  position: relative;
}
.mod-center-page .page-item {
    display: table-cell;
}
.mod-center-page .main-left {
  max-width: 375px;
  min-width: 225px;
  vertical-align: top;
  background: #fff;
  -webkit-box-shadow: 0 2px 20px 0 rgb(0 0 0 / 5%);
  box-shadow: 0 2px 20px 0 rgb(0 0 0 / 5%);
  width: 225px;
}
.mod-center-page .page-item {
  display: table-cell;
}
.mod-center-page .main-center {
  position: relative;
  min-width: 540px;
  vertical-align: top;
  min-width: 320px;
}
.mod-top-list {
  margin: 0.9rem 0;
    padding: 40px 0 0 0;
  background: #fff;
}
ul, ol {
    list-style: none;
}
.mod-center-ul {
  position: relative;
  background: #FFFFFF;
  overflow: hidden;
  border-radius: 1.2rem;
}
.border-lighter li, .border-lighter div, .border-lighter a {
  position: relative;
  z-index: 1;
}
.mod-top-list .ucenter {
  display: none;
}
.mod-top-list .mod-center-ul li {
  padding: 0;
  height: 44px;
  line-height: 45px;
}
.mod-top-list .mod-center-ul .ucenter {
  display: block;
}
.mod-center-ul li.pc-menu {
  cursor: pointer;
}
.mod-top-list .li-line {
   border-bottom: none;
}
.mod-top-list .mod-center-ul li div {
  height: 100%;
}
.left {
  float: left;
}
.mod-top-list .mod-li-div {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 14px;
}
.menu .checked .mod-li-div {
  color: #2E58FF;
}
.menu .checked .blueicon {
  height: 20px;
  width: 5.2px;
  background-color: #2E58FF;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
.mod-center-ul li.pc-menu:hover {
    background: #F4F6FF;
}
.mod-center-list {
  padding: 25px 0 0 0;
  background: #fff;
  margin-bottom: 0.9rem;
}
.mod-center-list .mod-li-div {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 14px;
  height: 100%;
}
.mod-center-list .mod-center-ul li {
    padding: 0;
    height: 44px;
    line-height: 45px;
}
.mod-center-list .li-line {
    border-bottom: none;
}
.mod-center-list .mod-center-ul li div {
    height: 100%;
}
.mod-center2-list {
  margin-bottom: 0.9rem;
  padding: 25px 0 0 0;
  background: #fff;
}
.mod-center2-list .mod-center-ul li {
    padding: 0;
    height: 44px;
    line-height: 45px;
}
.mod-center2-list .li-line {
  border-bottom: none;
}
.mod-center2-list .mod-center-ul li div {
  height: 100%;
}
.mod-center2-list .mod-li-div {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 14px;
}
.mod-bottom-list {
  margin-bottom: 0.9rem;
  padding: 25px 0 0 0;
  background: #fff;
}
.mod-bottom-list .mod-center-ul li {
  padding: 0;
  height: 44px;
  line-height: 45px;
}
.mod-bottom-list .li-line {
  border-bottom: none;
}
.mod-bottom-list .mod-center-ul li div {
  height: 100%;
}
.mod-bottom-list .mod-li-div {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 14px;
}
.mod-center-page .page-item {
  display: table-cell;
}
.mod-center-page .main-center {
  position: relative;
  min-width: 540px;
  vertical-align: top;
  min-width: 320px;
}
.mod-center-page .main-center .main-center-content {
    position: relative;
    margin: 10px;
    padding: 10px;
    -webkit-box-shadow: 0 2px 20px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 2px 20px 0 rgb(0 0 0 / 5%);
    border-radius: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
}
.mod-center-page .main-center .main-center-content-ucenter {
    background: none;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#pageWrapper {
    width: 100%;
    position: relative;
    min-height: 100%;
}
.mod-center-page .main-right {
  width: 330px;
  vertical-align: top;
  position: relative;
  display: table-cell;
}
.mod-center-page .main-right .main-right-content {
    position: absolute;
    right: 15px;
    top: 30px;
    bottom: 30px;
}
.manage-main-right {
    border-radius: 1.3248rem;
    -webkit-box-shadow: 0 0.2208rem 2.208rem 0 rgb(0 0 0 / 5%);
    box-shadow: 0 0.2208rem 2.208rem 0 rgb(0 0 0 / 5%);
    background: #fff;
    padding: 0 24px 24px 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
}
.manage-main-right .right-photo {
    position: relative;
    text-align: center;
    padding-top: 51px;
    height: 100px;
    width: 100px;
    margin-left: -50px;
    left: 50%;
}
.manage-main-right .right-photo:hover .hover-photo {
  display: block;
}
.manage-main-right .right-photo .hover-photo {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 51px;
  left: 50%;
  margin-left: -50px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  text-align: center;
}
.manage-main-right .right-photo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -webkit-box-shadow: 0 0.2208rem 2.208rem 0 rgb(0 0 0 / 5%);
  box-shadow: 0 0.2208rem 2.208rem 0 rgb(0 0 0 / 5%);
      border: 0;
}
.manage-main-right .right-photo .hover-photo a {
    padding: 32px 33px 32px 36px;
    font-size: 0.8rem;
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.hover-photo {
    display: none;
}
.manage-main-right .right-name {
    padding-top: 60px;
    letter-spacing: 0;
    text-align: center;
    font-size: 2.15rem;
}
.manage-main-right .right-info {
    padding-top: 9px;
    font-size: 1.2144rem;
    text-align: center;
}
.manage-main-right .right-info span {
    margin-right: 2px;
}
h3, h4, h5, h6 {
    font-weight: 400;
}
.manage-main-right .right-line {
    padding-top: 25px;
    border: none;
    border-bottom: solid 1px #E5EAF2;
}
</style>